<route lang="json5" type="page">
{
  "needLogin": true,
  "style": {
    "navigationBarTitleText": "余额预警"
  }
}
</route>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const warningStatus = ref('on')
const statusColumns = ref([
  { label: '开', value: 'on' },
  { label: '关', value: 'off' },
])
const warningStatusLabel = computed(() => {
  return warningStatus.value === 'on' ? '开' : '关'
})
function onStatusConfirm({ value }: { value: string }) {
  warningStatus.value = value
}

// 预警额度的可选值
const quotaColumns = ref([50, 60, 70, 80, 90, 100, 150, 200])

// 当前选中的预警额度
const selectedQuota = ref(50)

// 格式化 cell 中显示的值
const quotaValue = computed(() => `${selectedQuota.value}元`)

// 格式化选择器中显示的值
function formatter(value: number) {
  return `${value}元`
}

function onConfirm({ value }: { value: number }) {
  selectedQuota.value = value
  uni.showToast({
    title: '设置成功',
    icon: 'success',
  })
}
</script>

<template>
  <view class="min-h-screen pt-3">
    <wd-cell-group>
      <wd-picker
        v-model="warningStatus"
        :columns="statusColumns"
        use-default-slot
        @confirm="onStatusConfirm"
      >
        <wd-cell title="余额预警" :value="warningStatusLabel" is-link />
      </wd-picker>
    </wd-cell-group>

    <wd-cell-group v-if="warningStatus === 'on'" custom-class="mt-6">
      <wd-picker
        v-model="selectedQuota"
        :columns="[quotaColumns]"
        :formatter="formatter"
        use-default-slot
        @confirm="onConfirm"
      >
        <wd-cell
          title="预警额度"
          :value="quotaValue"
          is-link
        />
      </wd-picker>
    </wd-cell-group>
  </view>
</template>

<style lang="scss" scoped></style>
